
<template>
  <div class="pageDiv">
    <!-- 页面标题 -->
    <h1 class="cartoonFont" >发现</h1>
    <!-- 发现页导航 -->
    <a-row class="mb4">
      <a-col v-for="item in FilterGetClassilyData" flex="auto" :key="item" :span="2" class="itemLi" @click="sendCat(item)">
        <span>{{item}}</span>
      </a-col>
    </a-row>
    <!-- 下面卡片 -->
    <a-row class="mb4 row" justify="space-between">
      <a-col v-for="item in playlistData" :span="6" :key="item.id" class="cartoontext col">
        <div class="newSongCol">
            <img :src="item.coverImgUrl" alt="">
            <p>{{item.name}}</p>
        </div>
    </a-col>
    </a-row>
  </div>
  
</template>


<script lang="ts">
import { defineComponent, onMounted, onUpdated, ref } from "@vue/runtime-core";
import { getPlaylistClassilyStor,playlistStore } from '../../store'

  export default defineComponent({
     name:"find",
     setup(){
      // 获取分类名称
      const ClassilyData = ref()
      const StoreCalssily = getPlaylistClassilyStor()
      const playlistData = ref()
      const playlistDataStore = playlistStore()
      let FilterGetClassilyData:any = ref([])
      const playlistDataCat = ref('全部')

      async function  sendCat(cat:string){
        playlistDataCat.value = cat
        playlistData.value = (await playlistDataStore.fetch(playlistDataCat.value)).data.playlists
        console.log(playlistData.value)
      }

      onMounted(async()=>{
        ClassilyData.value= (await StoreCalssily.fetch('catlist')).data
        playlistData.value = (await playlistDataStore.fetch(playlistDataCat.value)).data.playlists
        FilterGetClassilyData.value.push(ClassilyData.value.all.name)
        const aa = [...ClassilyData.value.sub]
        const subArray:any = []
        // 设置个随机状态
        let status = 0
        status = Math.round(Math.random()*7)
        switch(status){
          case 0:
          for(let i =0;i<9;i++){ subArray.push(aa[i].name) }
          break;
          case 1:
          for(let i =9;i<18;i++){ subArray.push(aa[i].name) }
          break;
          case 2:
          for(let i =18;i<27;i++){ subArray.push(aa[i].name) }
          break;
          case 3:
          for(let i =27;i<36;i++){ subArray.push(aa[i].name) }
          break;
          case 4:
          for(let i =36;i<45;i++){ subArray.push(aa[i].name) }
          break;
          case 5:
          for(let i =45;i<54;i++){ subArray.push(aa[i].name) }
          break;
          case 6:
          for(let i =54;i<63;i++){ subArray.push(aa[i].name) }
          break;
          case 7:
          for(let i =61;i<70;i++){ subArray.push(aa[i].name) }
          break;
        }
        FilterGetClassilyData.value.push(...subArray)
        //打印
        console.log(playlistData.value)
        
      })
      onUpdated(async()=>{
        
        console.log(playlistData.value)
      })
      return{
        ClassilyData,
        FilterGetClassilyData,
        sendCat,
        playlistData
      }
     }
  })
</script>

<style scoped lang="less">
.row{
 
  .col{
   
  }
}
.cartoonFont{
    font-size: 52px;
}
.newSongCol{
  text-align: center;
}
.newSongCol img{
  border: 3px solid black;
  border-radius: 8px;
  width: 320px;
}
.newSongCol img:hover{
   cursor: pointer;
   box-shadow: 6px 6px 3px rgba(0, 0, 0, 0.2);
  
}
.itemLi {
    margin-left: 1rem;
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    padding: 0.4rem;
    color: rgb(0, 0, 0);
    border: solid 2px rgb(0, 0, 0);
    border-radius: 8px;
  }
  .itemLi:hover {
  box-sizing: border-box;
  color: #5599ff;
  cursor: pointer;
}

</style>
